<template>
  <div class="edit_gender">
    <van-picker
      title="性别"
      show-toolbar
      :columns="columns"
      @cancel="handleCancel"
      @confirm="onConfirm"
      @change="handleChange"
      :default-index="defaultIndex"
    />
  </div>
</template>

<script>
import { updateUserProfile } from "@/request/home";
import { Toast } from "vant";

export default {
  props: {
    defaultIndex: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      columns: ["男", "女"],
      showPicker: false,
      genderValue: 0
    };
  },
  created() {
    // console.log(this.defaultIndex);
  },
  methods: {
    handleChange(p, v, i) {
      console.log(v, i);
      this.genderValue = i;
    },
    async onConfirm() {
      Toast.loading({
        message: "保存中...",
        forbidClick: true
      });
      try {
        await updateUserProfile({
          gender: this.genderValue
        });
        Toast.success({
          message: "保存成功"
        });
        this.$emit("closeGender");
      } catch (error) {
        if (error && error.response && error.response.status === 429) {
          Toast.fail({
            message: "昵称已存在"
          });
        }
      }
    },
    handleCancel() {
      this.$emit("closeGender");
    }
  }
};
</script>

<style lang="less" scoped>
// .edit_gender
</style>